<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>夏目友人帐</title>
  <link rel="stylesheet" href="style/register.css">
  <link rel="stylesheet" href="style/index.css">
  <link rel="stylesheet" href="style/login_exist.css">
  <link rel="stylesheet" href="style/register_exist.css">
  <link rel="stylesheet" href="style/tixing.css">
  <script src="scripts/register.js"></script>
  <style type="text/css">
    body,
    td,
    th {
      font-family: "微软雅黑";
      font-size: 14px;
      color: #333;
    }

    body {
      margin-left: 0px;
      margin-top: 0px;
      background-color: #b3e0fa;
    }

    #top {
      height: 240px;
      width: 1024px;
      margin-right: auto;
      margin-left: auto;
      background-image: url(images/xm05.jpg);
    }

    #top #top-grey {
      height: 130px;
      width: 1024px;
      margin-right: auto;
      margin-left: auto;
      background-image: url(images/grey.png);
    }

    #top #bar-x {
      height: 72px;
      width: 1024px;
      margin-right: auto;
      margin-left: auto;
      border-bottom-width: 1px;
      border-bottom-style: solid;
      border-bottom-color: #f7f7f7;
    }

    #top #top-grey #bar-x #logo {
      height: 39px;
      width: 143px;
      margin-top: 15px;
      margin-left: 30px;
      float: left;
    }

    #top #top-grey #bar-x #menu {
      height: 20px;
      width: 360px;
      float: left;
      margin-left: 200px;
      margin-top: 26px;
    }

    #top #top-grey #bar-x #menu2 {
      font-family: "微软雅黑";
      font-size: 11px;
      height: 20px;
      width: 70px;
      float: left;
      margin-left: 120px;
      margin-top: 25px;
      border: 1px solid #f7f7f7;
      border-radius: 3px;
      text-align: center;
      line-height: 20px;
    }

    #top #top-grey #bar-x #menu #menu-tab {
      font-family: "微软雅黑";
      font-size: 13px;
      color: #ffffff;
      float: left;
      height: 20px;
      width: 60px;
      margin-left: 5px;
      text-align: center;
      line-height: 20px;
      border-radius: 2px;
    }


    .d_over {
      background-color: #31c27c;
      transition-duration: 1s;
    }

    .d_out {
      background-color: rgba(0, 0, 0, 0);
    }

    .c_over {
      background-color: #31c27c;
      transition-duration: 1s;
    }

    .c_out {
      background-color: #f6f6f6;
    }

    #top a:link {
      color: #f2f2f2;
      text-decoration: none;
    }

    #top a:visited {
      color: #f2f2f2;
      text-decoration: none;
    }

    #top a:hover {
      color: #000;
      text-decoration: none;
    }

    #top a:active {
      text-decoration: none;
    }

    #main {
      height: 670px;
      width: 1024px;
      margin-right: auto;
      margin-left: auto;
      background-color: #b3e0fa;
    }

    #main #title {
      height: 26px;
      width: 140px;
      margin-right: auto;
      margin-left: auto;
      font-family: "微软雅黑";
      font-size: 22px;
      font-weight: bold;
      color: #000;
      text-align: center;
      line-height: 26px;
      padding-top: 30px;
      letter-spacing: 1px;
    }

    #main #green {
      background-color: #31c27c;
      height: 3px;
      width: 23px;
      margin-top: 20px;
      margin-right: auto;
      margin-left: auto;
    }

    #down {
      font-family: "微软雅黑";
      font-size: 12px;
      color: #FFF;
      background-color: #2b2b2b;
      height: 90px;
      width: 1024px;
      margin-right: auto;
      margin-left: auto;
    }

    #down #down1 {
      height: 40px;
      width: 835px;
      margin-right: auto;
      margin-left: auto;
      padding-top: 26px;
    }

    a.black:link {
      color: #000000;
      text-decoration: none;
    }

    a.black:visited {
      text-decoration: none;
      color: #000000;
    }

    a.black:hover {
      text-decoration: none;
      color: #31c27c;
    }

    a.black:active {
      text-decoration: none;
    }

    a.blue:link {
      color: #118cff;
      text-decoration: none;
    }

    a.blue:visited {
      text-decoration: none;
      color: #118cff;
    }

    a.blue:hover {
      text-decoration: none;
      color: #31c27c;
    }

    a.blue:active {
      text-decoration: none;
    }

    #wenzhang {
      height: 340px;
      width: 920px;
      margin-top: 20px;
      margin-right: auto;
      margin-left: auto;
      font-family: "微软雅黑";
      font-size: 13px;
      line-height: 25px;
      color: #000;
    }

    .ayahei {
      font-family: "微软雅黑";
      font-size: 15px;
      font-weight: bold;
      color: #000;
    }

    #main #line855 {
      height: 3px;
      width: 855px;
      border-bottom-width: 1px;
      border-bottom-style: dashed;
      border-bottom-color: #CCC;
      margin-right: auto;
      margin-left: auto;
    }

    .divAll {
      width: 450px;
      font-family: "微软雅黑";
      margin: 30px auto;
    }

    #titles {
      font-weight: bold;
      font-size: 12px;
      height: 50px;
      line-height: 50px;
      background: #FFF9F3;
      text-align: center;
      border: 1px solid #CCC;
      ;
    }

    #contents {
      margin-top: 20px;
      border: 1px solid #CCC;
      font-family: "微软雅黑";
      font-size: 13px;
      background-color: #FFFFFF;
    }

    #form-itemGroup {
      padding: 5px;
    }

    #form-itemGroup label {
      display: inline-block;
      width: 100px;
      height: 32px;
      line-height: 32px;
      color: #666;
      text-align: right;
    }

    #form-itemGroup .userName {
      width: 180px;
      height: 40px;
      line-height: 40px;
      border: 1px solid #CCC;
    }

    #form-itemGroup .default {
      width: 350px;
      height: 32px;
      line-height: 32px;
      color: #999;
    }

    #form-itemGroup .error {
      height: 32px;
      line-height: 32px;
      color: #F00;
    }

    #form-itemGroup .success {
      height: 32px;
      line-height: 32px;
      color: #096;
    }

    .divBtn {
      margin-top: 20px;
      margin-left: 20px;
      width: 100px;
      height: 32px;
      line-height: 32px;
      background-color: #999;
      margin-bottom: 10px;
      color: #ffffff;
      font-weight: bold;
      border: none;
    }

    .forget_password a {
      color: #3975f2;
    }
  </style>
</head>

<body>
  <div id="top">
    <div id="top-grey">
      <div id="bar-x">
        <div id="logo"><a href="#"><img src="images/logo.png" alt="" width="143" height="39"></a></div>
        <div id="menu">
          <div id="menu-tab" class="d_out" onmouseover="this.className='d_over'" onmouseout="this.className='d_out'"><a
              href="#">首页</a></div>
          <div id="menu-tab" class="d_out" onmouseover="this.className='d_over'" onmouseout="this.className='d_out'"><a
              href="#">推荐</a></div>
          <div id="menu-tab" class="d_out" onmouseover="this.className='d_over'" onmouseout="this.className='d_out'"><a
              href="#">专题</a></div>
          <div id="menu-tab" class="d_out" onmouseover="this.className='d_over'" onmouseout="this.className='d_out'"><a
              href="#">剧场版</a></div>
          <div id="menu-tab" class="d_out" onmouseover="this.className='d_over'" onmouseout="this.className='d_out'"><a
              href="#">视频</a><a href="music.html"></a></div>
        </div>
        <div id="menu2" class="d_out" onmouseover="this.className='d_over'" onmouseout="this.className='d_out'"><a
            href="#">注册/登录</a></div>
      </div>
    </div>
  </div>
  <div id="main">
    <div class="yemian">
      <div class="login_form">
        <div class="title">
          <h3>Sign in</h3>
        </div>
        <form name="login" id='login'>
          <div class="login_box">
            <div class="login_text_uspa">
              <input type="text" value placeholder="请输入手机号码" class="login_text_cmu" id="login_username">
              <input type="password" value placeholder="请输入密码" class="login_text_cmu" id="login_password">
              <ul>
                <div class="ewm_zhaopian"></div>
                <li class="ewm"><a href="#">&#xe98d;</a></li>
                <li><a href="#">&#xe607;</a></li>
                <li><a href="#">&#xe667;</a></li>
                <li><a href="#">&#xe66b;</a></li>
              </ul>
              <div class="forget_password"><a href="#">Forgot Password</a>
              </div>
              <div class="login_bnt">
                <button type="button" class="login_submit" id="login_btn">Sign in</button>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="register_form">
        <div class="title">
          <h3>Sign up</h3>
        </div>
        <form name="register" id="register">
          <div class="register_box">
            <div class="register_text_uspa">
              <input type="text" value placeholder="请输入手机号码" class="register_text_cmu" id="register_username"
                name="username" required>
              <span class="yes_no_1"></span>
              <div class="nihao_1"></div>
              <input type="password" value placeholder="请输入密码" class="register_text_cmu" id="register_password"
                name="password" required>
              <span class="yes_no_2"></span>
              <div class="nihao_2"></div>
              <input type="password" value placeholder="请再次输入密码" class="register_text_cmu"
                id="register_confirm_password" name="confirm_password" required>
              <span class="yes_no_3"></span>
              <div class="register_btn">
                <button type="button" class="register_submit" id="register_btn">Sign up</button>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="login_exist">
        <div class="text_box">
          <div class="text_1">
            <h3>已有账号？</h3>
          </div>
          <span class="login_text_2">快点击登录按钮进行登录吧！</span>
          <button type="submit" class="login_exist_submit">Sign in</button>
        </div>
      </div>
      <div class="register_exist">
        <div class="text_box">
          <div class="text_1">
            <h3>没有账号？</h3>
          </div>
          <span class="register_text_2">点击注册去注册一个属于你的账号吧！</span>
          <button type="submit" class="register_exist_submit">Sign un</button>
        </div>
      </div>
    </div>
  </div>
  </div>
  <footer style="margin-top: 0;">
    <div id="down">
      <div id="down1">
        <table width="100%" border="0">
          <tr>
            <td width="82%"><img src="images/logo.png" width="110" height="30"></td>
            <td width="7%"><img src="images/douyin.png" width="31" height="31"></td>
            <td width="7%"><img src="images/weibo.png" alt="" width="31" height="31"></td>
            <td width="4%"><img src="images/weixin.png" alt="" width="31" height="31"></td>
          </tr>
        </table>
      </div>
    </div>
  </footer>
  </div>
  <div class="tixing_box">
    <div class="tixing">
      <span class="close">&#xe637;</span>
      <span class="tixing_text"></span>
      <span class="daojishi">将在5秒后返回登录页面！</span>
      <button class="confirm">确定</button>
    </div>
  </div>
</body>

</html>